<template>
  <view class="page-screen" :style="{top:CustomBar+'px'}">
    <view class="screen flex justify-around align-center text-666 text-lg" >
      <view class="screen-item" :class="{'active':select == 1}" @click="change(1)">
        {{i18n['综合']}}
      </view>
      <view class="screen-item" :class="{'active':select == 2}" @click="change(2)">
        {{i18n['销量']}}
      </view>
      <view class="screen-item flex justify-center align-center" :class="{'active':select == 3}" @click="change(3)">
        <view>
          {{i18n['价格']}}
        </view>
        <view class="screen-price">
          <view class="up" :class="{active:order == 'asc'}">
            <text class="cuIcon-triangleupfill text-xl up text-999"></text>
          </view>
          <view class="down" :class="{active:order == 'desc'}">
            <text class="cuIcon-triangledownfill text-xl down text-999"></text>
          </view>
        </view>
      </view>
      <view class="screen-item" :class="{'active':is_new}" @click="newChange()">
        {{i18n['新品']}}
      </view>
      <view class="screen-item" @click="changeBlock" v-if="isShow">
        <text :class="isBlock?'cuIcon-apps':'cuIcon-list'" class="text-xl"></text>
      </view>
    </view>
  </view>
</template>

<script>
  export default{
    props:{
      show:{
        type:Boolean,
        default:true
      }
    },
    data(){
      return{
        isBlock:true,
        select:1,//1综合 2销量 3价格
        order:'asc',//升序 asc 或者 倒序 desc 默认升序
        is_new:false,//是否是新品
      }
    },
    computed:{
      isShow(){
        return this.show
      }
    },
    mounted() {

    },
    methods:{
      /**
       * @description 商品展示切换
       */
      changeBlock(){
        this.isBlock = !this.isBlock;
        this.$emit('changeBlock',this.isBlock);
      },
      /**
       * @description 筛选
       * @param {String} type comprehensive综合 salesVolume销量 price价格 new新品
       */
      change(type){
        this.is_new = false;
        // 1综合排序，2销量，3价格,is_new 0不搜新品 1搜新品   order  升序 asc 或者 倒序 desc 默认升序
        this.select = type;
        if(type == 2){
          this.order = 'desc';
        }
        // 默认第一次默认值筛选
        if(type == 3){
          if(this.order == 'asc'){
            this.order = 'desc';
          }else{
            this.order = 'asc';
          }
        }
        this.$emit('change',{sort:type,order:this.order,isBlock:this.isBlock,is_new:this.is_new?1:0});
      },
      /**
       * @description 筛选新品
       */
      newChange(){
        this.is_new = true;
        this.select = '';
        this.$emit('change',{sort:'',order:'',isBlock:this.isBlock,is_new:this.is_new?1:0});
      },
      /**
       * @description 重置筛选项
       */
      reset(){
        this.select = 1;//1综合 2销量 3价格
        this.order = 'asc';//升序 asc 或者 倒序 desc 默认升序
        this.is_new = false;//是否是新品
      }
    }
  }
</script>

<style scoped lang="scss">
  .page-screen{
    position: sticky;
    z-index: 99999;
  }
.screen{
  background: #FFFFFF;
  width: 100%;
  // height: 104rpx;

  .screen-item{
    // height: 104rpx;
    // line-height: 104rpx;
    &.active{
      // color:$theme;
      font-weight: bold;
      color: #333333;
      .screen-price{
        .up{
          &.active{
            text{
              color: $theme;
            }
          }
        }
        .down{
          &.active{
            text{
              color: $theme;
            }
          }
        }
      }
    }
    .screen-price{
      position: relative;
      width: 36rpx;
      height: 104rpx;
      // background: yellow;
      .up{
        position: absolute;
        bottom: 50%;
        left: 0;
        width: 36rpx;
        line-height: 20rpx;
        // background: red;
      }
      .down{
        position: absolute;
        top: 50%;
        left: 0;
        width: 36rpx;
        line-height: 20rpx;
        // background: blue;
      }

    }
  }
}
</style>
